import React from "react";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };

    this.dom_ref = React.createRef()
    console.log(this.dom_ref,'constructor');
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }
  componentDidMount(){
    console.log(this.dom_ref,'componentDidMount');
  }

  render() {
    console.log(this.dom_ref,'render');
    
    if (this.state.hasError) {
      return <h1 ref={this.dom_ref}>Error</h1>; // 有错误时显示备用 UI
    }
    return this.props.children; // 无错误时渲染子组件
  }
}

class Error extends React.Component{
  render() {
    sda
    return (
      <div>
        sdad
      </div>
    )
  }
}

class App extends React.Component{
  render() {
    return (
      <div>
        <ErrorBoundary>
          <Error />
        </ErrorBoundary>
        ssss
      </div>
    )
  }
}

export default App;
